<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="免费图纸">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="liucheng d-flex align-items justify-content-center">
			<view class="search">
				<u-search placeholder="请输入要查询的内容" placeholderColor="#C9CDD4" :actionStyle="actionStyle" shape="square"
					v-model="keyword" @search="search" @custom="custom" @clear="clear"></u-search>
			</view>
		</view>
		<!-- 筛选 -->
		<view class="shaixuan">
			<scroll-view scroll-x="true" direction="horizontal" class="shaixuan-scroll">
				<view class="scroll-view-item_H" @click="shaixuan_picker(shaixuan, index)"
					v-for="(shaixuan,index) in shaixuanLists" :key="index">
					<view class="mianji d-flex align-items justify-content-center">
						<view class="mianji-t">{{shaixuan.tit}}</view>
						<image class="mianjiImg" src="../static/down.png" mode="widthFix"></image>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-picker :show="shaixuan_show" keyName="label" @confirm="shaixuan_confirm" @cancel="shaixuan_show = false"
			:columns="columns"></u-picker>
		<!-- 图纸列表 -->
		<view class="w-690">
			<view class="fengge-list">
				<view class="choose-fengge margin-top-30" @click="go_detail(fengGe)"
					v-for="(fengGe,index1) in feng_ge_lists" :key="index1">
					<image :src="fengGe.pingmian_images_first" mode="widthFix" class="fenggeImg"></image>
					<view class="fengge-t">{{fengGe.content2.title}}</view>
					<view class="type-list d-flex align-items">
						<view class="type-list-m">{{fengGe.mianji}}m²</view>
						<view class="type-list-m">长{{fengGe.jinshen}}m</view>
						<view class="type-list-m">宽{{fengGe.miankuan}}m</view>
						<view class="type-list-m">{{fengGe.zaojia}}万</view>
						<view class="type-list-m">{{fengGe.jiegouname}}</view>
						<view class="type-list-m">{{fengGe.huxingname}}</view>
						<view class="type-list-m">{{fengGe.fenggename}}</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 客服组件 -->
		<movable-area class="movableArea">
			<movable-view class="movableView" :position="position" :x="x" :y="y" :direction="direction"
				:damping="damping" @change="onChange" @touchend="onTouchend">
				<image src="../../static/index/xinxi_icon.png" mode="widthFix" class="iconImage"></image>
			</movable-view>
		</movable-area>
		<!-- 身份信息选择弹窗 -->
		<view class="">
			<u-popup :show="show_info" closeable mode="center" @close="show_info=false" :round="10">
				<view class="shenfen_info">
					<view class="shenfen_tit">请选择身份信息</view>
					<view class="u-radio_shenfen">
						<u-radio-group iconPlacement="right" borderBottom size="38rpx" shape="circle"
							v-model="radio_juese_value" placement="column">
							<u-radio :customStyle="{height:'80rpx',}" v-for="(item, index) in jueselists" :key="index"
								:label="item.name" @change="radioChange_info(item,index)" :name="item.id">
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		getXinxilist,
		cengselect,
		priceselect,
		jinshenselect,
		mianjiselect,
		miankuanselect,
		getfengge,
		getmygroup,
	} from '@/api/user.js'
	export default {
		data() {
			return {
				keyword: '',
				actionStyle: {
					color: '#FF6400',
					fontSize: '30rpx',
				},
				feng_ge_lists: [],
				shaixuan_show: false,
				shaixuanLists: [{
					id: 0,
					jianzhi: 0,
					tit: '面积',
				}, {
					id: 5,
					jianzhi: 5,
					tit: '风格',
				}, {
					id: 2,
					jianzhi: 2,
					tit: '造价',
				}, {
					id: 3,
					jianzhi: 3,
					tit: '面宽',
				}, {
					id: 4,
					jianzhi: 4,
					tit: '进深',
				}],
				columns: [],
				cur: '',
				mianji_id: '',
				ceng_id: '',
				zaojia_id: '',
				miankuan_id: '',
				jinshen_id: '',
				fengge_id: '',
				page: 1,
				limit: 5,



				x: 0,
				y: 0,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0
				},
				jueselists: [],
				radio_juese_value: '',
				show_info: false,

			}
		},
		props: {
			damping: {
				type: Number,
				default: 10
			},
			direction: {
				type: String,
				default: "all"
			},
			position: {
				type: Number,
				default: 4
			}
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - 50;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 20;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
					}, 1000)
				}
			})
		},
		onLoad() {
			this.get_tuzhi()
			this.get_ceng()
			this.get_jiage()
			this.get_jinshen()
			this.get_miankuan()
			this.get_mianji()
			this.get_fengge()
		},
		onShow() {
			this.get_role();
		},
		// 用户下拉加载
		onPullDownRefresh() {
			this.page = 1
			this.get_tuzhi()
		},
		// 上拉触底加载
		onReachBottom() {
			this.page++
			this.get_tuzhi()
		},
		methods: {

			// 获取图纸信息
			get_tuzhi() {
				var data = {
					page: this.page,
					limit: this.limit,
					type: 9,
					// group_id:
					// user_id:

					ceng: this.ceng_id,
					jinshen: this.jinshen_id,
					mianji: this.mianji_id,
					miankuan: this.miankuan_id,
					price: this.zaojia_id,
					fengge: this.fengge_id,
					keyword: this.keyword
				}
				getXinxilist(data).then(res => {
					console.log("获取图纸列表", res);
					if (res.code == 1) {
						if (this.page == 1) {
							this.feng_ge_lists = res.data.list
						} else {
							this.feng_ge_lists = this.feng_ge_lists.concat(res.data.list)
						}
						uni.stopPullDownRefresh()
					}
				})
			},
			// 获取层数搜索
			get_ceng() {
				cengselect({}).then(res => {
					console.log("获取层数收缩", res);
					if (res.code == 1) {
						// this.columns = res.data.cengselect_list
						let a = []
						a.push({
							label: '全部',
							id: 0
						})
						for (let s of res.data.cengselect_list) {
							a.push({
								label: s.name,
								id: s.id
							})
						}
						this.columns = [a]
					}
				})
			},
			// 价格列表
			get_jiage() {
				priceselect({}).then(res => {
					console.log("获取层数收缩", res);
					if (res.code == 1) {
						// this.columns = res.data.cengselect_list
						let a = []
						a.push({
							label: '全部',
							id: 0,
						})
						for (let s of res.data.priceselect_list) {
							a.push({
								label: s.name,
								id: s.id
							})
						}
						this.columns = [a]
					}
				})
			},
			// 进深列表
			get_jinshen() {
				jinshenselect({}).then(res => {
					console.log("获取层数收缩", res);
					if (res.code == 1) {
						// this.columns = res.data.cengselect_list
						let a = []
						a.push({
							label: '全部',
							id: 0,
						})
						for (let s of res.data.jinshenselect_list) {
							a.push({
								label: s.name,
								id: s.id
							})
						}
						this.columns = [a]
					}
				})
			},
			// 面积列表
			get_mianji() {
				mianjiselect({}).then(res => {
					console.log("获取层数收缩", res);
					if (res.code == 1) {
						// this.columns = res.data.cengselect_list
						let a = []
						a.push({
							label: '全部',
							id: 0,
						})
						for (let s of res.data.mianjiselect_list) {
							a.push({
								label: s.name,
								id: s.id
							})
						}
						this.columns = [a]
					}
				})
			},
			// 面宽列表
			get_miankuan() {
				miankuanselect({}).then(res => {
					console.log("获取层数收缩", res);
					if (res.code == 1) {
						// this.columns = res.data.cengselect_list
						let a = []
						a.push({
							label: '全部',
							id: 0,
						})
						for (let s of res.data.miankuanselect_list) {
							a.push({
								label: s.name,
								id: s.id
							})
						}
						this.columns = [a]
					}
				})
			},

			// 获取设计风格
			get_fengge() {
				getfengge({}).then(res => {
					console.log("获取层数收缩", res);
					if (res.code == 1) {
						// this.columns = res.data.cengselect_list
						let a = []
						a.push({
							label: '全部',
							id: 0,
						})
						for (let s of res.data.fengge_list) {
							a.push({
								label: s.name,
								id: s.id
							})
						}
						this.columns = [a]
					}
				})
			},

			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			search(e) {
				console.log("eaa", e);
				this.get_tuzhi()
				this.page = 1
			},
			custom() {
				this.get_tuzhi()
				this.page = 1
			},
			clear() {
				this.get_tuzhi()
				this.page = 1
			},
			go_detail(fengGe) {
				uni.navigateTo({
					url: '/pagesA/index_top/tuzhi_detail?content_id=' + fengGe.content_id
				})
			},
			shaixuan_picker(shaixuan, index) {
				console.log("kkkkkkkkkkkkkkk", shaixuan);
				this.cur = index
				if (shaixuan.id == 0) {
					this.get_mianji()
				}
				if (shaixuan.id == 1) {
					this.get_ceng()
				}
				if (shaixuan.id == 2) {
					this.get_jiage()
				}
				if (shaixuan.id == 3) {
					this.get_miankuan()
				}
				if (shaixuan.id == 4) {
					this.get_jinshen()
				}
				if (shaixuan.id == 5) {
					this.get_fengge()
				}
				this.shaixuan_show = true
			},
			shaixuan_confirm(e) {
				console.log("点击筛选选中的值为", this.shaixuanLists);
				this.shaixuan_show = false
				this.shaixuanLists[this.cur].tit = e.value[0].label

				if (this.shaixuanLists[this.cur].jianzhi == 0) {
					this.mianji_id = e.value[0].id
					if (e.value[0].id == 0) {
						this.shaixuanLists[this.cur].tit = '面积'
					}
					this.page = 1
				}
				if (this.shaixuanLists[this.cur].jianzhi == 1) {
					this.ceng_id = e.value[0].id
					if (e.value[0].id == 0) {
						this.shaixuanLists[this.cur].tit = '层数'
					}
				}
				if (this.shaixuanLists[this.cur].jianzhi == 2) {
					this.zaojia_id = e.value[0].id
					if (e.value[0].id == 0) {
						this.shaixuanLists[this.cur].tit = '造价'
					}
					this.page = 1
				}
				if (this.shaixuanLists[this.cur].jianzhi == 3) {
					this.miankuan_id = e.value[0].id
					if (e.value[0].id == 0) {
						this.shaixuanLists[this.cur].tit = '面宽'
					}
					this.page = 1
				}
				if (this.shaixuanLists[this.cur].jianzhi == 4) {
					this.jinshen_id = e.value[0].id
					if (e.value[0].id == 0) {
						this.shaixuanLists[this.cur].tit = '进深'
					}
					this.page = 1
				}

				if (this.shaixuanLists[this.cur].jianzhi == 5) {
					this.fengge_id = e.value[0].id
					if (e.value[0].id == 0) {
						this.shaixuanLists[this.cur].tit = '风格'
					}
					this.page = 1
				}
				this.get_tuzhi()
			},



			// 这个是拖动客服按钮
			onChange(e) {
				if (e.detail.source === "touch") {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			// 这个点击客服按钮
			onTouchend(e) {
				if (!uni.getStorageSync('token')) {
					uni.showToast({
						title: '请登录后发布',
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						})
					}, 500)
				} else {
					this.x = this.move.x;
					this.y = this.move.y;
					setTimeout(() => {
						if (this.move.x < this.x2 / 2) this.x = this.x1;
						else this.x = this.x2;
						console.log(this.x, this.y)
					}, 100)
					if (this.jueselists) {
						this.radio_juese_value = 0;
						this.show_info = true
					} else {
						uni.showToast({
							title: '请添加角色信息',
							icon: 'none'
						})
					}
				}
			},
			// 信息发布选择身份信息弹窗
			radioChange_info(n, idx) {
				console.log("选择第几个身份", n, idx);
				if (n.status == 0) {
					uni.showToast({
						title: '角色信息正在审核中，请耐心等待！',
						icon: 'none'
					})
				}
				if (n.status == 1) {
					uni.navigateTo({
						url: '/pagesB/info_fabu/guzhu_info_fabu?id=' + n.id
					})
				}
				if (n.status == 2) {
					uni.showToast({
						title: '角色信息正在审核失败，请点击上方角色文字框去修改！',
						icon: 'none'
					})
				}
				this.show_info = false;
				this.radio_juese_value = "";
			},

			// 获取顶部添加之后的角色信息列表
			get_role() {
				getmygroup({}).then(res => {
					console.log("获取顶部角色列表", res);
					if (res.code == 1) {
						this.jueselists = res.data.grouplist
					}
				})
			},
		}
	}
</script>

<style>
	.scroll-view-item_H {
		width: 200rpx;
		height: 103rpx;
		display: inline-block;
	}

	.shaixuan-scroll {
		width: 700rpx;
		white-space: nowrap;
		padding-top: 25rpx;
		margin: auto;
	}

	.mianjiImg {
		width: 30rpx;
		display: block;
		margin-left: 10rpx;
	}

	.mianji-t {
		font-size: 30rpx;
		font-weight: normal;
		color: #1D2129;
	}

	.mianji {}

	.shaixuan {
		width: 750rpx;
		background-color: #fff;
		height: 103rpx;
		margin-top: 16rpx;
	}

	.type-list {
		margin-left: 20rpx;
		padding-bottom: 25rpx;
		flex-wrap: wrap;
	}

	.type-list-m {
		padding: 7rpx 15rpx;
		font-size: 20rpx;
		color: #FF4D4F;
		border-radius: 4.5px;
		background: #FDF2F2;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.fengge-t {
		font-size: 30rpx;
		font-weight: 700;
		line-height: 50rpx;
		color: #333333;
		margin: 27rpx 0 10rpx 20rpx;
	}

	.fenggeImg {
		width: 690rpx;
		display: block;
	}

	.choose-fengge {
		width: 690rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 25rpx;
	}

	.w-690 {
		width: 690rpx;
		margin: auto;
	}

	.search {
		width: 690rpx;
		margin: auto;
	}

	.liucheng {
		width: 750rpx;
		height: 102rpx;
		background-color: #fff;
		margin-top: 2px;
	}

	page {
		background-color: #F7F8FB;
		padding-bottom: 70rpx;
	}

	/* 客服系统样式 */
	.movableArea {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
	}

	.movableView {
		pointer-events: auto; //可以点击
		width: 200rpx;
		height: 200rpx;
		padding: 10rpx;
		border-radius: 100%;
	}

	.iconImage {
		display: block;
		width: 200rpx;
		// animation: iconImage 5s linear infinite;
	}

	@keyframes iconImage {
		0% {
			-webkit-transform: rotate(0deg);
		}

		25% {
			-webkit-transform: rotate(90deg);
		}

		50% {
			-webkit-transform: rotate(180deg);
		}

		75% {
			-webkit-transform: rotate(270deg);
		}

		100% {
			-webkit-transform: rotate(360deg);
		}
	}

	/* 客服 */
	.contact {
		width: 50px;
		height: 50px;
		overflow: hidden;
		position: absolute;
		left: 0px;
		top: 0px;
		border-radius: 100%;
		opacity: 0;
	}

	.shenfen_tit {
		font-size: 30rpx;
		font-weight: 600;
		color: #000;
		padding-top: 30rpx;
		text-align: center;
	}

	.shenfen_info {
		width: 650rpx;
	}

	.u-radio_shenfen {
		width: 600rpx;
		margin: auto;
	}
</style>